<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/vue.js"></script>
    <script src="js/element.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <el-col :span="5">
        <el-menu
                style="max-height:10px;"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <div v-for="(val1, key1) in videoInfo" :key="key1">
                <el-submenu :index="key1+''">
                    <i slot="title" class="el-icon-menu"></i>
                    <span slot="title">{{val1.name}}</span>
                    <div v-for="(val2, key2) in val1.episode" :key="key2">
                        <el-menu-item @click="play(val1.name, val2)" :index="key1+'-'+key2">{{val2}}</el-menu-item>
                    </div>
                </el-submenu>
            </div>
        </el-menu>
    </el-col>
    <el-col :span="15">
        <div>
            <video id="player" width="100%" height="100%" controls preload="auto">
                <source id="source" src="" type="video/mp4">
            </video>
        </div>
    </el-col>
</div>
<script>
    Vue.prototype.$axios = axios
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                pathBase: "http://45.32.27.235:8080/",
                //pathBase: "http://localhost:8080/",
                videoInfo: []
            }
        },
        created() {
            this.getAllSortAndEpisode()
        },
        methods: {
            getAllSortAndEpisode: function () {
                this.$axios
                    .get(this.pathBase + "getAllSortAndEpisode")
                    .then(res => {
                        this.videoInfo = res.data
                        this.sort(this.videoInfo)
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            play: function (name, episode) {
                document.getElementById("player").src = this.pathBase + "video/" + name + "/" + episode;
            },
            sort: function (videoInfo) {
                for (let k in videoInfo) {
                    for (let i = 0; i < videoInfo[k].episode.length - 1; i++) {
                        for (let j = i + 1; j < videoInfo[k].episode.length; j++) {
                            if (Number(videoInfo[k].episode[i].substring(0, 2)) > Number(videoInfo[k].episode[j].substring(0, 2))) {
                                let temp = videoInfo[k].episode[i];
                                videoInfo[k].episode[i] = videoInfo[k].episode[j];
                                videoInfo[k].episode[j] = temp;
                            }
                        }
                    }
                }
            }
        }
    })
</script>
</body>
</html>